<template>
	<div
		class="page"
		style="padding: 20px 20px 0px 20px; width: 1200px; margin: 0 auto"
	>
		<div class="table-top">
			<el-input
				v-model="tableData.interfaceName"
				style="width: 200px"
				placeholder="接口名"
			/>
			<div class="right">
				<el-button type="primary" @click="search"> 搜索 </el-button>
			</div>
		</div>
		<el-table :data="tableData.rows" border style="width: 100%">
			<el-table-column prop="createTime" label="发生时间"> </el-table-column>
			<el-table-column prop="interfaceName" label="接口名"> </el-table-column>
			<el-table-column prop="success" label="状态">
				<template #default="scope">
					{{ scope.row.success ? "成功" : "失败" }}
				</template>
			</el-table-column>
			<el-table-column prop="requestParameter" label="请求">
				<template #default="scope">
					<el-input
						v-model="scope.row.requestParameter"
						style="width: 240px"
						:rows="2"
						type="textarea"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="responseParameter" label="响应">
				<template #default="scope">
					<el-input
						v-model="scope.row.responseParameter"
						style="width: 240px"
						:rows="4"
						type="textarea"
					/>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作">
				<template #default="scope">
					<el-button @click="editApp(scope.row)"> 详情 </el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<div class="table-bottom">
			<el-pagination
				v-model:current-page="tableData.pageNum"
				v-model:page-size="tableData.pageSize"
				:page-sizes="[10, 20, 30, 40]"
				layout="prev, pager, next"
				:total="tableData.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>
</template>
<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import request from "@/utils/request.js";
import { ElMessage, ElMessageBox } from "element-plus";
let tableData = reactive({
	rows: [],
	total: 0,
	pageNum: 1,
	pageSize: 10,
	interfaceName: "",
});
const getList = async () => {
	let res = await request({
		url: "/user/serviceRequestLog/list",
		method: "post",
		data: {
			interfaceName: tableData.interfaceName,
			pageNum: tableData.pageNum,
			pageSize: tableData.pageSize,
		},
	});
	if (res.code == 200) {
		tableData.rows = res.rows;
		tableData.total = res.total;
	}
};
const search = () => {
	tableData.pageNum = 1;
	getList();
};
const handleSizeChange = (val) => {
	tableData.pageSize = val;
	getList();
};
const handleCurrentChange = (val) => {
	tableData.pageNum = val;
	getList();
};

onMounted(() => {
	getList();
});
</script>
<style lang="scss" scoped>
.page {
	padding: 20px;
	.table-top {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		.right {
			display: flex;
			align-items: center;
		}
	}
	.table-bottom {
		display: flex;
		justify-content: flex-end;
	}
}
</style>
